indexvideo()

// 轮播图
var swiper = new Swiper('.swiper-container', {
  loop: true,
  autoplay: {
    dedelay: 3000,
    pauseOnMouseEnter: true
  },
  pagination: true,
  pagination: '.swiper-pagination',
  paginationClickable: '.swiper-pagination',
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});
/*密码显示开关 */
$('.look img').click(function () {
  if ($('.loginbox input:eq(1)').attr('type') == "password") {
    this.src = "./img/upload/睁眼.svg"
    $('.loginbox input:eq(1)').attr('type', "text")
    return
  }

  if ($('.loginbox input:eq(1)').attr('type') == "text") {
    $('.loginbox input:eq(1)').attr('type', 'password')
    this.src = "./img/upload/闭眼.svg"
    return
  }
})
/*关闭按钮*/
$('.login .close').click(function () {
  $('.mask').hide()
  $(".loginframe").hide()
})
/*登录方式切换*/
$('#loginbox1').click(function () {
  $('.loginbox').empty()
  $('.loginbox').html(`<span>账号&nbsp;&nbsp;&nbsp;</span><input type="text" placeholder="请输入账号">
            <br>
            <span>密码&nbsp;&nbsp;&nbsp;</span><input type="password" placeholder="请输入密码">
            <br>
            <div class="look">
              <img src="./img/upload/闭眼.svg" alt="">
              忘记密码?
            </div>
            <button class="signinbtn1">注册</button>
            <button class="loginbtn1">登录</button>`)
  $(this).prop('disabled', true);
  $(this).hover(function () {
    $(this).css('cursor', 'not-allowed');
  })
  $('.active').removeClass('active')
  $(this).addClass('active')

  $('#loginbox2').prop('disabled', false)
  $('#loginbox2').hover(function () {
    $('#loginbox2').css('cursor', 'pointer');
  })


})
$('#loginbox2').click(function () {
  $('.loginbox').empty()
  $('.loginbox').html(`<span>+86&nbsp;&nbsp;&nbsp;</span><input type="text" placeholder="请输入手机号">
            <br>
            <span>验证码</span><input type="password" placeholder="请输入验证码">
            <br>
            <div class="getvalidcode pointer">
              获取验证码
            </div>
            <button class="loginbtn2">登录/注册</button>`)
  $(this).prop('disabled', true);
  $(this).hover(function () {
    $(this).css('cursor', 'not-allowed');
  })
  $('.active').removeClass('active')
  $(this).addClass('active')

  $('#loginbox1').prop('disabled', false)
  $('#loginbox1').hover(function () {
    $('#loginbox1').css('cursor', 'pointer');
  })

})

function indexvideo(){
  axios({
    url:'static/getIndexV',
    method:'GET',
  }).then(res=>{
    let data = res.data.data
    console.log(res)
    let list =''
    let list2 =''
    let list3 =''
    for(let i=0;i<data.length;i++){
      if(i<6){
        let time = data[i].videoTime.split(" ")[0]
        list +=
        `
          <div class="voide">
            <a href="./uservideodetail.html?vid=${data[i].videoId}" target="_blank">
            <div class="voideimgbox">
              <img src="${data[i].detail.detailImg}" alt="${data[i].videoTitle}">
              <div class="indextag">
                <span><span class="iconfont icon-shipin"></span>${6.8+i+'万'}</span>
                <span><span class="iconfont icon-pinglun"></span>${25+i}</span>
                <span><span></span>${(i+1)*5+'.'+i*2}</span>
              </div>
            </div>
            <p class="title">${data[i].videoTitle}</p>
            <div class="upinfo">
              <span class="iconfont icon-uper"></span>
              <p>${data[i].user.username}</p>
              <p>${time}</p>
            </div>
            </a>
          </div>
        `
      }else if(i>=6 && i<10){
        let time = data[i].videoTime.split(" ")[0]
        list2 +=
        `
          <div class="voide">
            <a href="./uservideodetail.html?vid=${data[i].videoId}" target="_blank">
            <div class="voideimgbox">
              <img src="${data[i].detail.detailImg}" alt="${data[i].videoTitle}">
              <div class="indextag">
                <span><span class="iconfont icon-shipin"></span>${6.8+i+'万'}</span>
                <span><span class="iconfont icon-pinglun"></span>${25+i}</span>
                <span><span></span>${(i+1)*5+'.'+i*2}</span>
              </div>
            </div>
            <p class="title">${data[i].videoTitle}</p>
            <div class="upinfo">
              <span class="iconfont icon-uper"></span>
              <p>${data[i].user.username}</p>
              <p>${time}</p>
            </div>
            </a>
          </div>
        `
      }else{
        let time = data[i].videoTime.split(" ")[0]
        list3 +=
        ` <div class="voide upinfos">
          <a href="./animedetail.html?vid=${data[i].videoId}" target="_blank">
          <div class="voideimgbox">
            <img src="${data[i].detail.detailImg}" alt="${data[i].videoTitle}">
            <div class="indextag">
                <span><span class="iconfont icon-shipin"></span>${6.8+i+'万'}</span>
                <span><span class="iconfont icon-pinglun"></span>${25+i}</span>
                <span><span></span>${(i+1)*5+'.'+i*2}</span>
            </div>
            <div class="classtag">
              <span class="iconfont icon-wangluoketang"></span>
              <span>${data[i].videoMold}</span>
            </div>
          </div>
          <p class="title">${data[i].videoTitle}</p>
          <div class="upinfo">
            <p>${time}</p>
          </div>
          </a>
        </div>
        `
      }
      
    }
    $('main .right').append(list)
    $('.voides').append(list2)
    $('.voides').append(list3)
  })
}

// 滚动刷新
$(window).scroll(function(){
  let topX = $(window).scrollTop()
  let top = 0
  if(topX > 1500){
    console.log("5666655644664546")
    return
  }
  if((topX-top)>220){
    indexvideoSc()
    top = topX
  }
})

function indexvideoSc(){
  axios({
    url:'static/getIndexM',
    method:'GET',
  }).then(res=>{
    let data = res.data.data
    console.log(res)
    let list2 =''
    let list3 =''
    for(let i=0;i<data.length;i++){
      if(i<4){
        let time = data[i].videoTime.split(" ")[0]
        list2 +=
        `
          <div class="voide">
            <a href="./uservideodetail.html?vid=${data[i].videoId}">
            <div class="voideimgbox">
              <img src="${data[i].detail.detailImg}" alt="${data[i].videoTitle}">
              <div class="indextag">
                <span><span class="iconfont icon-shipin"></span>${6.8+i+'万'}</span>
                <span><span class="iconfont icon-pinglun"></span>${25+i}</span>
                <span><span></span>${(i+1)*5+'.'+i*2}</span>
              </div>
            </div>
            <p class="title">${data[i].videoTitle}</p>
            <div class="upinfo">
              <span class="iconfont icon-uper"></span>
              <p>${data[i].user.username}</p>
              <p>${time}</p>
            </div>
            </a>
          </div>
        `
      }else{
        let time = data[i].videoTime.split(" ")[0]
        list3 +=
        ` <div class="voide upinfos">
          <a href="./animedetail.html?vid=${data[i].videoId}">
          <div class="voideimgbox">
            <img src="${data[i].detail.detailImg}" alt="${data[i].videoTitle}">
            <div class="indextag">
                <span><span class="iconfont icon-shipin"></span>${6.8+i+'万'}</span>
                <span><span class="iconfont icon-pinglun"></span>${25+i}</span>
                <span><span></span>${(i+1)*5+'.'+i*2}</span>
            </div>
            <div class="classtag">
              <span class="iconfont icon-wangluoketang"></span>
              <span>${data[i].videoMold}</span>
            </div>
          </div>
          <p class="title">${data[i].videoTitle}</p>
          <div class="upinfo">
            <p>${time}</p>
          </div>
          </a>
        </div>
        `
      }
    }
    $('.voides').append(list2)
    $('.voides').append(list3)
  })
}

//换一换
$('.refresh').on('click',function(){
  $('main .right .voide').remove()
  $('.voides').empty()
  indexvideo()
})